<!--  -->
<template>
  <div>
        <v-title :text="'个体画像'"/>
    <el-row>
      <el-col :span="6">
        <el-autocomplete
          class="inline-input"
          v-model="topic_id"
          :fetch-suggestions="querySearch"
          placeholder="请输入Topic"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="6">
        <div class="demo-input-suffix">
          <el-input
            placeholder="请输入用户ID"
            prefix-icon="el-icon-search"
            v-model="user_id">
          </el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="get_label">查询</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="8">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-col>
      <el-col :span="16">
      <el-tag>姓名： {{user_name}}</el-tag>
      <el-tag>用户ID： {{user_id}}</el-tag>
      <el-tag>cookie ID： {{cookie_id}}</el-tag>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="12">
        <title>标签列表</title>
        <el-table
          :data="tableData"
          height="500"
          stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            label="标签ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="标签名"
            width="180">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <title>可视化画像</title>
        <div id="wc">
          <v-chart v-show="wordCloud_show" :options="wordCloud"/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>


<script>
import "echarts/lib/chart/bar";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
import "echarts-wordcloud";
import Title from '@/components/Title/Title'
import Subtitle from '@/components/Title/Subtitle'

export default {
  data() {
    return {
      user_name:"",
      user_id:"",
      cookie_id:"",
      wordCloud_show: false,
      tableData: [],
      topics: [],
      topic_id: '',
      wordCloud: {
        backgroundColor: "#ffffff",
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 1,
            sizeRange: [15, 55],
            rotationRange: [-45, 0, 45, 90],
            // maskImage: maskImage,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ")"
                  );
                },
              },
            },
            left: "left",
            top: "center",
            // width: '96%',
            // height: '100%',
            right: null,
            bottom: null,
            // width: 300,
            // height: 200,
            // top: 20,
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var topics = this.topics;
      var results = queryString ? topics.filter(this.createFilter(queryString)) : topics;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (topics) => {
        return (topics.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      this.$axios({
        url: "http://"+this.$config.server_ip+":5000/get_topic_list",
        method: "get",
      }).then(res => {
        console.log(res.data)
        this.topics = res.data;
      });
    },
    handleSelect(item) {
      console.log(item);
    },
    get_label() {
      this.$axios({
        url: "http://"+this.$config.server_ip+":5000/indi_profile",
        method: "get",
        params: {
          'user_id': this.user_id,
          "topic_id":this.topic_id
        }
      }).then(res => {
        console.log(res)
        this.user_name = res.data.name;
        this.cookie_id = res.data.cookie_id;
        this.tableData = res.data.label_table;
        this.wordCloud.series.data = [];
        this.wordCloud.series[0].data = res.data.wc_data;
      })
      console.log(this.wordCloud);
      this.$message('查询成功');
      this.wordCloud_show = true
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.loadAll()
  },
  components:{
        "v-title": Title,
    "v-subtitle": Subtitle,
  },
};
</script>

<style scoped>

</style>
